<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #map {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?type=quick&ak=v39tYjUNeLluTojzZGqmNHpQ&v=1.0"></script>
    <script type="text/javascript" charset="utf-8" src="../js/cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/jquery-1.7.1.min.js"></script>
    <title>Hello PhoneGap</title>
    <script type="text/javascript">
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            navigator.geolocation.getCurrentPosition(locateSuccess, locateError);
        }
        function locateSuccess(position) {
            navigator.notification.alert("定位成功！", null, "提醒");
            var locate = $("#geoLocation");
            var html = "经度：" + position.coords.longitude + "<br/>纬度：" + position.coords.latitude;
            locate.html(html);
//            locate.innerHTML = html;
            var map = new BMap.Map("map"); //在相应的DOM处展现地图
            var point = new BMap.Point(position.coords.longitude, position.coords.latitude);
            map.centerAndZoom(point, 14); //以当前经纬度信息为地图中心点
            map.addOverlay(new BMap.Marker(point));//地图上添加标注
//            map.enableScrollWheelZoom();
            var gc = new BMap.Geocoder();
            //根据当前地图中心点，获取详细的位置信息：省市区街道牌号等
            gc.getLocation(point, function (rs) {
                var addComp = rs.addressComponents;
                var address = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
                //将详细的位置信息追加到指定的DOM中
                locate.html(locate.html() + "<br/>地址：" + address);
            });
            //自动位置上报
            var url = "http://192.168.0.32:8888/app/location.jfinal";
            var data = {
                latitude: position.coords.latitude,//纬度
                longitude: position.coords.longitude,//经度
                uuid: device.uuid// 设备唯一标识
            };
            $.post(url, data, function () {
                navigator.notification.alert("自动位置上报成功！", null, "提醒");
            });
        }
        function locateError(error) {
            navigator.notification.alert("定位失败：" + error.message, null, "警告");
        }
    </script>
</head>
<body>
    <h1>Hello PhoneGap</h1>
    <!-- 这里用来显示经纬度及位置信息 -->
    <p id="geoLocation"></p>
    <!--这里用来显示地图-->
    <div id="map"></div>
</body>
</html>